<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title>上课倒计时</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css"/>

</head>

<body>
<div style="text-align:center;clear:both">
    <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
    <script src="/follow.js" type="text/javascript"></script>
</div>
<main>
    <div style="display:none">
        <div id="top-test-anim" class="num-anim top-anim" style="display:none;">
            <div class="top-half-num">2</div>
        </div>
        <div id="bottom-test-anim" class="num-anim bottom-anim" style="display:none;">
            <div class="bottom-half-num">
                <div class="dropper">3</div>
            </div>
        </div>
    </div>
    <canvas id="my-canvas"></canvas>
    <!--<audio src="audio/up1.mp3" muted="muted" controls="controls" preload id="music1" hidden>-->
    <!--<audio src="audio/up1.mp3"  controls="controls" preload id="music1" hidden>
        <button id="bfzt" onclick="bf();">播放/暂停</button>
        <button id="replay" onclick="rbf();">重新播放</button>
    </audio>-->
    <div id="music" ></div>
    <div><h1 style="color:red">上课倒计时</h1></div>
    <div id="clock">
        <!-- 时 -->
        <div class="time-container hours">
            <div class="digit">
                <div class="fade">&nbsp;</div>
                <span class="num top" id="hour-tens-top">1</span>
                <span class="num bottom" id="hour-tens-bottom">
          <div class="bottom-container">1</div></span>
                <div class="swapper">
                    <div id="top-hour-tens-anim" class="num-anim top-anim" style="display:none;">
                        <div class="top-half-num">8</div>
                    </div>
                    <div id="bottom-hour-tens-anim" class="num-anim bottom-anim"
                         style="display:none;">
                        <div class="bottom-half-num">
                            <div class="dropper">9</div>
                        </div>
                    </div>
                </div>
                <div class="ring ring-left"></div>
                <div class="ring ring-right"></div>
            </div>
            <div class="digit">
                <div class="fade">&nbsp;</div>
                <span class="num top" id="hour-ones-top">3</span>
                <span class="num bottom" id="hour-ones-bottom">
          <div class="bottom-container">3</div></span>
                <div class="swapper">
                    <div id="top-hour-ones-anim" class="num-anim top-anim" style="display:none;">
                        <div class="top-half-num">8</div>
                    </div>
                    <div id="bottom-hour-ones-anim" class="num-anim bottom-anim"
                         style="display:none;">
                        <div class="bottom-half-num">
                            <div class="dropper">9</div>
                        </div>
                    </div>
                </div>
                <div class="ring ring-left"></div>
                <div class="ring ring-right"></div>
            </div>
        </div>
        <!-- 分 -->
        <div class="time-container minutes">
            <div class="digit">
                <div class="fade">&nbsp;</div>
                <span class="num top" id="minute-tens-top">4</span>
                <span class="num bottom" id="minute-tens-bottom">
          <div class="bottom-container">4</div></span>
                <div class="swapper">
                    <div id="top-minute-tens-anim" class="num-anim top-anim" style="display:none;">
                        <div class="top-half-num">8</div>
                    </div>
                    <div id="bottom-minute-tens-anim" class="num-anim bottom-anim"
                         style="display:none;">
                        <div class="bottom-half-num">
                            <div class="dropper">9</div>
                        </div>
                    </div>
                </div>
                <div class="ring ring-left"></div>
                <div class="ring ring-right"></div>
            </div>
            <div class="digit">
                <div class="fade">&nbsp;</div>
                <span class="num top" id="minute-ones-top">3</span>
                <span class="num bottom" id="minute-ones-bottom">
          <div class="bottom-container">3</div></span>
                <div class="swapper">
                    <div id="top-minute-ones-anim" class="num-anim top-anim" style="display:none;">
                        <div class="top-half-num">8</div>
                    </div>
                    <div id="bottom-minute-ones-anim" class="num-anim bottom-anim"
                         style="display:none;">
                        <div class="bottom-half-num">
                            <div class="dropper">9</div>
                        </div>
                    </div>
                </div>
                <div class="ring ring-left"></div>
                <div class="ring ring-right"></div>
            </div>
        </div>
        <!-- 秒-->
        <div class="time-container seconds">
            <div class="digit">
                <div class="fade">&nbsp;</div>
                <span class="num top" id="second-tens-top">5</span>
                <span class="num bottom" id="second-tens-bottom">
          <div class="bottom-container">5</div></span>
                <div class="swapper">
                    <div id="top-second-tens-anim" class="num-anim top-anim" style="display:none;">
                        <div class="top-half-num">8</div>
                    </div>
                    <div id="bottom-second-tens-anim" class="num-anim bottom-anim"
                         style="display:none;">
                        <div class="bottom-half-num">
                            <div class="dropper">9</div>
                        </div>
                    </div>
                </div>
                <div class="ring ring-left"></div>
                <div class="ring ring-right"></div>
            </div>
            <div class="digit">
                <div class="fade">&nbsp;</div>
                <span class="num top" id="second-ones-top">3</span>
                <span class="num bottom" id="second-ones-bottom">
          <div class="bottom-container">2</div></span>
                <div class="swapper">
                    <div id="top-second-ones-anim" class="num-anim top-anim" style="display:none;">
                        <div class="top-half-num">2</div>
                    </div>
                    <div id="bottom-second-ones-anim" class="num-anim bottom-anim"
                         style="display:none;">
                        <div class="bottom-half-num">
                            <div class="dropper">3</div>
                        </div>
                    </div>
                </div>
                <div class="ring ring-left"></div>
                <div class="ring ring-right"></div>
            </div>
        </div>
    </div>
</main>

<script src='js/jquery.js'></script>

<script src="js/index.js"></script>
<script>



</script>

</body>

</html>